<template>
	<view class="bg">
		<view class="notice_list">
			<view class="notice_list_item" @longpress="onLongPress(i.externalId)" v-for="(i,index) in externalList"
				:key="index">
				<view>
					<image style="width: 24px;height: 24px;border-radius: 4px;" src="@/static/ico_message.png" />
				</view>
				<view style="flex: 1;width: 90%;margin-left: 14px;">
					<view class="notice_title text-elli">{{i.company}}</view>
					<view class="notice_title text-elli">{{'姓名：'+i.externalName}}</view>
					<!-- <view class="notice_content text-elli-2">{{simpleNotice(i.content)}}</view> -->
					<view class="flex-between text-grey" style="margin-top: 10px;">
						<view class="date">{{'电话:'+i.phone}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tip"> 已显示全部</view>
		<u-button v-if="roleType == 'SYSTEM_ADMIN' || roleType == 'PROJECT'" @click="addCustomer"
			class="addbtn">+</u-button>
	</view>
</template>

<script>
	import {
		listExternal,
		delExternal
	} from '@/api/typeManager.js'
	export default {
		data() {
			return {
				roleType: uni.getStorageSync('roleType'),
				externalList: [],
			}
		},
		onLoad() {
			this.getExternalList()
		},
		methods: {
			onLongPress(id) {
				if (this.roleType == 'SYSTEM_ADMIN' || this.roleType == 'PROJECT') {

					let that = this
					uni.showModal({
						title: '确定删除此外聘人员',
						content: '',
						success: function(res) {
							if (res.confirm) {
								// 用户第一次确认
								that.delExternal(id)
							} else if (res.cancel) {
								// 用户第一次取消
								console.log('用户取消了操作');
							}
						}
					});
				}
			},
			async delExternal(id) {
				console.log(id)
				const res = await delExternal({
					externalId: id
				});
				this.getExternalList()
			},
			addCustomer() {
				uni.navigateTo({
					url: '/pages/typeManager/externalManager/addExernal'
				});
			},
			routeTo(id) {
				// uni.navigateTo({
				// 	url: 'notice_info?id='+id
				// });
			},
			async getExternalList() {
				uni.showLoading({
					title: '请稍等...'
				})
				var res = null;
				try {
					res = await listExternal({
						data: {}
					});
					console.log(res.data)
					this.externalList = res.data
				} catch (err) {
					console.log(err)
				} finally {
					uni.hideLoading()
				}
			},
			// simpleNotice(content){

			// 	let newcontent = content.replace('<p>','').replace('</p>','');

			// 	let reg = /<(.*?)>/gms;
			// 	// console.log(reg.exec(newcontent));
			// 	newcontent = newcontent.replace(reg,'')

			// 	return newcontent;
			// },
		}
	}
</script>

<style>
	.bg {
		background-color: #FAFAFA;
		width: 100%;
	}

	.text-elli {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.text-elli-2 {

		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.text-grey {
		color: #B2B2B2;
		font-size: 12px;
	}

	.notice_list {
		border: 1px solid #FAFAFA;
		border-radius: 5px;
	}

	.notice_list_item {
		background-color: #FFF;
		border: 1px solid #fff;
		border-radius: 4px;
		margin-bottom: 14px;
		padding: 16px 14px;
		display: flex;
		margin: 14px;
	}

	.tip {
		text-align: center;
		font-size: 13px;
		color: #b2b2b2;
	}

	.peg {
		color: #2D89E5;
	}

	.notice_title {
		font-weight: bold;
		color: #333;
		font-size: 15px;
	}

	.notice_content {
		color: #999;
		font-size: 12px;
		margin-top: 5px;
	}

	.addbtn {
		position: fixed;
		/* 使按钮保持固定位置 */
		bottom: 50px;
		/* 距离底部20像素 */
		right: 20px;
		/* 距离右侧20像素 */
		background-color: #007bff;
		/* 背景颜色 */
		color: white;
		/* 文本颜色 */
		border: none;
		/* 无边框 */
		border-radius: 50%;
		/* 圆形按钮 */
		padding: 15px;
		/* 填充 */
		width: 50px;
		height: 50px;
		cursor: pointer;
		/* 鼠标光标变为指针 */
		z-index: 999;
		/* 确保按钮在最上层 */
	}
</style>